import React from 'react';
import { Typography, Card, Steps } from 'antd';
import { useTheme, themeBackgrounds } from '../../contexts/ThemeContext';

const { Title } = Typography;
const { Step } = Steps;

interface StepItem {
  title: string;
  description: string;
}

interface StepsSectionProps {
  steps: StepItem[];
}

const StepsSection: React.FC<StepsSectionProps> = ({ steps }) => {
  const { themeType } = useTheme();
  const isDark = themeType === 'dark';

  return (
    <div style={{ 
      padding: '80px 24px', 
      background: isDark ? '#0D0E11' : '#FCFCFF' 
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Title 
          level={2} 
          style={{ 
            textAlign: 'center', 
            marginBottom: 64,
            color: isDark ? '#fff' : '#000'
          }}
        >
          使用步骤
        </Title>
        <Card
          style={{ 
            background: isDark 
              ? 'rgba(30, 30, 40, 0.3)' 
              : themeBackgrounds.light,
            borderRadius: 12,
            boxShadow: isDark 
              ? 'none' 
              : '0 4px 12px rgba(0, 0, 0, 0.03)'
          }}
          bordered={false}
        >
          <Steps 
            current={-1} 
            direction="vertical"
            items={steps.map((step, index) => ({
              title: step.title,
              description: step.description,
            }))}
            className={isDark ? '' : 'light-steps'}
          />
        </Card>
      </div>
    </div>
  );
};

export default StepsSection; 